<!-- 面包屑
emit:isControl控制菜单折叠
-->

<template>
     <!-- 工具栏图标点击true翻转180度 -->
     <div class="left-tool">
                     <div @click="isControl = !isControl" :title="isControl ? '展开' : '折叠'" class="show-node"><el-icon :size="28"
                           :style="{ transform: 'rotate(' + (isControl ? -180 : 0) + 'deg)' }">
                           <Fold />
                        </el-icon></div>
                     <!-- 面包屑 -->
                     <el-breadcrumb :separator-icon="ArrowRight">
                        <el-breadcrumb-item :to="{ path: '/index/dashboard' }">{{ $t('home') }}</el-breadcrumb-item>
                        <template v-for="item in $route.matched.slice(1)" :key="item.name">
                           <template v-if="item.name != 'dashboard'">
                              <el-breadcrumb-item>{{ $t(item.meta.title as string) }}</el-breadcrumb-item>
                           </template>
                        </template>
                     </el-breadcrumb>
                  </div>
</template>
<script setup lang="ts">
import { ArrowRight, Fold, } from '@element-plus/icons-vue'
import {ref,watch} from 'vue'
const isControl=ref(false)//用来控制左侧导航栏折叠和图标翻转
const emit=defineEmits<{//子传父，自定义事件与传过去的值
   (e:'changeControl',isControl:boolean):void
}>()
watch(isControl,(isControl)=>{//监听子传父的事件内容变化
emit('changeControl',isControl)
})
</script>
<style scoped lang="less">
.left-tool {
   width: 100%;
   display: flex;
   justify-content: start;
   align-items: center;


   .show-node {
      margin: 1px;

      &>.el-icon {
         transition: all 0.5s; //图标延迟旋转
      }
   }
}
</style>